import { useState, useRef, useContext, useEffect } from 'react'
// import avatar from './images/bozai.png'
import './fuxi.scss';
import _ from 'lodash';
import { v4 as uuidv4 } from 'uuid';
import dayjs from 'dayjs';
import { MsgContext } from './context';
import useGetInfoHook from './useGetInfoHook';

/**
 * 评论列表的渲染和操作
 *
 * 1. 根据状态渲染评论列表
 * 2. 删除评论
 */

// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 8811,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  // 用户昵称
  uname: '黑马前端',
}

/**
 * 导航 Tab 的渲染和操作
 *
 * 1. 渲染导航 Tab 和高亮
 * 2. 评论列表排序
 *  最热 => 喜欢数量降序
 *  最新 => 创建时间降序
 */

// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

const SonApp = (props) => {
  const { name, changeName, getSonVal } = props;
  const msg = useContext(MsgContext)
  return (
    <div>
      son
      <button onClick={() => changeName(1232)}>点击</button>
      <button onClick={ () => getSonVal(123223) }>子穿父</button>
      { name }
    </div>
  )
}

const Bb = (props) => {
  const { sonName } = props;
  const msg = useContext(MsgContext)
  useEffect(() => {
    const clearInterval1 = setInterval(() => {
      console.log('jjjjjjj')
    }, 1000)

    return () => {
      clearInterval(clearInterval1)
    }
  })
  return (
    <div>
     --- { msg }---
    </div>
  )
}

const Sss = (props) => {
  const {name} = props;
  return (
    <li>
      { name }
    </li>
  )
}

const App = () => {
  const [contentList, setContentList] = useState(_.orderBy(defaultList, 'like', 'desc'))
  function handleDelete(id) {
    console.log(id)
    const nowDeleteComplateList = contentList.filter(item => item.rpid !== id)
    setContentList(nowDeleteComplateList)
  }

  const [activeHot, setActiveHot] = useState('hot')

  function handleChangeActiveTab(activeName) {
    setActiveHot(activeName)
    if(activeName === 'hot') {
      setContentList(_.orderBy(contentList, 'like', 'desc'))
    } else {
      setContentList(_.orderBy(contentList, 'ctime', 'desc'))
    }
  }

  const [contentText, setContentText] = useState('')

  function handleSubmit() {
    const newItem = {
      rpid: uuidv4(),
      user: {
        uid: '30009257',
        uname: '黑马前端',
      },
      content: '学前端就来黑马',
      ctime: dayjs().format('YYYY-MM-DD'),
      like: 66,
    }

    setContentList([
      ...contentList,
      newItem
    ])
    setContentText('')
  }

  const useRef1 = useRef(null)

  const [sonName, setSonName] = useState('11');
  function changeName(val) {
    setSonName(val)
  }

  function getSonVal(params) {
    console.log(params)
  }

  const [msg, setMsg] = useState('122')

  const [state1, setState1] = useState(true)



  const { ulListRes } = useGetInfoHook();




  return (
    <MsgContext.Provider value={msg}>
      <div className="app" ref={useRef1}>
        <SonApp changeName={changeName} getSonVal={getSonVal}></SonApp>
        {
          state1 && <Bb sonName={sonName}></Bb>
        }
        <button onClick={() => setState1(!state1)}>
          点击
        </button>
        {/* 导航 Tab */}
        <div className="reply-navigation">
          <ul className="nav-bar">
            <li className="nav-title">
              <span className="nav-title-text">评论</span>

              {/* 评论数量 */}
              <span className="total-reply">{10}</span>

            </li>

            <li className="nav-sort">
              {
                tabs.map(item => (
                  <span key={item.type} className={activeHot === item.type ? 'nav-item active' : 'nav-item'} onClick={() => handleChangeActiveTab(item.type)}>{ item.text }</span>
                ))
              }

              {/* 高亮类名： active */}
              {/* <span className={activeHot === 'time' ? 'nav-item active' : 'nav-item'} onClick={() => handleChangeActiveTab('time')}>最新</span>

              <span className={activeHot === 'hot' ? 'nav-item active' : 'nav-item'} onClick={() => handleChangeActiveTab('hot')}>最热</span> */}

            </li>

          </ul>

        </div>

        <div className="reply-wrap">
          {/* 发表评论 */}
          <div className="box-normal">
            {/* 当前用户头像 */}
            <div className="reply-box-avatar">
              <div className="bili-avatar">
              </div>

            </div>
            <div className="reply-box-wrap">
              {/* 评论框 */}
              <textarea
                className="reply-box-textarea"
                placeholder="发一条友善的评论"
                value={contentText}
                onChange={(e) => setContentText(e.target.value)}
              />
              {/* 发布按钮 */}
              <div className="reply-box-send">
                <div className="send-text" onClick={handleSubmit}>发布</div>

              </div>

            </div>

          </div>

          {/* 评论列表 */}
          <div className="reply-list">
            {/* 评论项 */}
            <div className="reply-item">
              {/* 头像 */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt=""
                  />
                </div>

              </div>

              {
                contentList.map((item, index) => {
                  return (
                    <div className="content-wrap" key={item.rpid}>
                      {/* 用户名 */}
                      <div className="user-info">
                        <div className="user-name">{item.user.uname}</div>

                      </div>

                      {/* 评论内容 */}
                      <div className="root-reply">
                        <span className="reply-content">{item.content}}</span>

                        <div className="reply-info">
                          {/* 评论时间 */}
                          <span className="reply-time">{item.ctime}</span>

                          {/* 评论数量 */}
                          <span className="reply-time">点赞数:{item.like}</span>


                          {
                            user.uid === item.user.uid && (
                              <span className="delete-btn" onClick={() => handleDelete(item.rpid)}>
                                删除
                              </span>
                            )
                          }



                        </div>

                      </div>

                    </div>
                  )
                })
              }

              

            </div>

          </div>

        </div>

      </div>
      <ul>
       
        {
          ulListRes.map(item => {
            return (
              <Sss key={item.id} name={item.name}></Sss>
            )
          })
        }
      </ul>
    </MsgContext.Provider>

  )
}

export default App